<template>
	<view class="comPop" @click="hidePop">
		<view class="popBox" @click.stop="">
			<view class="tit">
				<text>{{title}}</text>
			</view>
			<view class="inputBox" v-if="isInput">
				<input type="text" v-model="inputValue" :placeholder="$t('common.qsr')" />
			</view>
			<view class="btns">
				<text @click.stop="hidePop">{{$t('index.qx')}}</text>
				<text @click.stop="sendPopMsg">{{$t('index.qd')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comPop",
		props: {
			title: {
				type: String,
				default: "",
			},
			isInput: {
				type: Boolean,
				default: false,
			},
			type: {
				type: String,
				default: "",
			},
			value: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				inputValue: '',
			};
		},
		onLoad() {
			this.inputValue = this.value
		},
		methods: {
			hidePop() {
				this.$music.play_click_1()
				this.$emit('hidePop')
			},
			sendPopMsg() {
				if (this.isInput && !this.inputValue) {
					this.$music.play_click_1()
					this.$tools.showTx(this.$t('gdjj.qwztx'))
				} else {
					this.$music.play_confirm()
					this.$emit('sendPopFun', {
						value: this.inputValue,
						type: this.type
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.comPop {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(#000, 0.5);

		.popBox {
			width: 596rpx;
			background: #222222;
			box-sizing: border-box;
			border-radius: 30rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tit {
				color: #fff;
				font-size: 36rpx;
				margin: 10rpx 0 30rpx 0;
			}

			.inputBox {
				width: 550rpx;
				height: 80rpx;
				background: rgba(#000, 0.3);
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				input {
					color: #AAAAAA;
					font-size: 26rpx;
					padding-left: 30rpx;
				}
			}

			.btns {
				width: 550rpx;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;

				text {
					display: inline-flex;
					width: 250rpx;
					height: 80rpx;
					border: 1px solid #AAAAAA;
					border-radius: 50rpx;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #999999;
					box-sizing: border-box;

					&:nth-child(2) {
						background: linear-gradient(270deg, rgba(95, 88, 253, 0.95) 0%, rgba(98, 182, 252, 0.95) 100%), linear-gradient(195deg, rgba(237, 115, 219, 0.95) 22%, rgba(239, 93, 98, 0.95) 77%);
						color: #fff;
						border: none;
					}
				}
			}
		}
	}
</style>